<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-01-31 16:40:20
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-02-01 11:30:15
 * @FilePath: /hr_new_vue3/src/views/Management/Human/BaseSetting/IntershipSetting/IntershipEvaluation/Components/Preview/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%B
-->
<!-- 预览模板 -->
<template>
  <a-modal
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    width="80%"
    :mask-closable="false"
    title-align="center"
    unmountOnClose
    :body-style="{
      height: '500px'
    }"
  >
    <template #title> {{ data?.name }} </template>
    <div class="business">
      <div class="subDetail">
        <div class="head">
          <div class="sub-title">
            <p class="icon"></p>
            离职原因
          </div>
        </div>
        <div style="width: 90%; margin: auto">
          <!-- <a-radio-group disabled>
          <a-radio value="A">公司原因 </a-radio>
          <a-radio value="B">个人原因 </a-radio>
        </a-radio-group> -->
          <div>公司原因</div>
          <a-textarea
            disabled
            style="height: 150px; margin-top: 20px"
            placeholder="请填写公司原因"
            allow-clear
          />
          <div>个人原因</div>
          <a-textarea
            disabled
            style="height: 150px; margin-top: 20px"
            placeholder="请填写个人原因"
            allow-clear
          />
        </div>
      </div>
      <div class="subDetail">
        <div class="head">
          <div class="sub-title">
            <p class="icon"></p>
            面谈问题记录
          </div>
        </div>
        <div style="width: 90%; margin: auto">
          <a-table
            :scroll="{
              x: 200,
              y: 200
            }"
            :pagination="false"
            :bordered="TableBorder"
            :columns="columns"
            :data="data.takes"
            stripe
          >
            <template #rowIndex="{ rowIndex }"> {{ rowIndex + 1 }} </template>
          </a-table>
        </div>
      </div>
      <div class="subDetail">
        <div class="head">
          <div class="sub-title">
            <p class="icon"></p>
            挽留可能性与措施
          </div>
        </div>
        <div style="width: 90%; margin: auto">
          <div class="main">
            <div class="left">
              <div>挽留可能性</div>
              <div style="height: 100px; line-height: 100px">建议挽留措施</div>
            </div>
            <div class="right">
              <div>
                <a-radio-group disabled>
                  <a-radio>非常大</a-radio>
                  <a-radio>较大</a-radio>
                  <a-radio>一般</a-radio>
                  <a-radio>较小</a-radio>
                  <a-radio>很小</a-radio>
                </a-radio-group>
              </div>
              <div style="height: 100px"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="subDetail">
        <div class="head">
          <div class="sub-title">
            <p class="icon"></p>
            员工对公司的建议
          </div>
        </div>
        <div style="width: 90%; margin: auto">
          <a-textarea
            disabled
            style="height: 150px; margin-top: 20px"
            placeholder="Please enter something"
            allow-clear
          />
        </div>
      </div>
      <div class="subDetail">
        <div class="head">
          <div class="sub-title">
            <p class="icon"></p>
            面谈总结
          </div>
        </div>
        <div style="width: 90%; margin: auto">
          <a-textarea
            disabled
            style="height: 150px; margin-top: 20px"
            placeholder="Please enter something"
            allow-clear
          />
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
const props = defineProps<{
  visible: boolean;
  data: any;
}>();

const emits = defineEmits(['update:visible', 'contractAttachmentTemplateEmit']);

const rulesData = [{}, {}];
const formData = ref();
const TableBorder = {
  wrapper: true,
  cell: true,
  headerCell: true,
  bodyCell: true
};
const columns: any = [
  {
    title: '序号',
    dataIndex: 'index',
    align: 'center',
    slotName: 'rowIndex'
  },
  {
    title: '问题',
    dataIndex: 'problem',
    align: 'center'
  },
  {
    title: '答复',
    dataIndex: 'reply',
    align: 'center'
  }
];
watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      formData.value = props.data;
      console.log('====================================');
      console.log(formData.value);
      console.log('====================================');
    }
  }
);

const handleOk = () => {
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>
<style lang="less" scoped>
.business {
  width: 90%;
  // height: 100%;
  // overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  margin-bottom: 20px;
  .subDetail {
    width: 100%;
    .head {
      box-sizing: border-box;
      border-radius: 4px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 10px;
      background-color: #e8f0ff;
      margin: 20px 0;
      .sub-title {
        display: flex;
        align-items: center;
        .icon {
          border-radius: 4px;
          width: 6px;
          height: 70%;
          background-color: #3d7eff;
          height: 20px;
          padding: 0;
          margin: 3px 0;
          margin-right: 10px;
        }
      }
      .setting {
        color: #3d7eff;
        cursor: pointer;
      }
    }
    .add-question {
      background-color: #fff;
      border: 1px solid #eee;
      color: #3d7eff;
      padding: 10px;
      text-align: center;
    }
  }
}
:deep(.arco-table-pagination) {
  display: none;
}
.main {
  display: flex;

  .left {
    flex: 1;
    div {
      text-align: center;
      line-height: 50px;
      width: 100%;
      height: 50px;
      border: 1px solid #e4e4e4;
    }
  }
  .right {
    flex: 4;
    div {
      padding-left: 20px;
      line-height: 50px;
      width: 100%;
      height: 50px;
      border: 1px solid #e4e4e4;
    }
  }
}
</style>
